import React, {Component} from 'react';
import { StyleSheet, Text, View, FlatList, Image, ActivityIndicator } from 'react-native';
import { getMoives } from './api/moives';
export default class App extends Component<Props> {
    constructor(Props){
        super(Props)
        this.state = {
            data: [],
            loading:false
        }
    }
    render() {
        if (!this.state.loaded) {
            return this.renderLoadingView();
        }
    
        return (
        <FlatList
            data={this.state.data}
            renderItem={this.renderMovie}
            style={styles.list}
        />
        );
    }
    componentDidMount() {
        getMoives().then(res=>{
            console.log(res)
            this.setState({
                data:res.data.movies,
                loaded: true
            })
        })
    }
    renderLoadingView() {
        return (
          <View style={styles.container}>
            <ActivityIndicator size="large" animating={!this.state.loading} color="#0000ff" />
          </View>
        );
      }
    renderMovie({ item }) {
        // { item }是一种“解构”写法，请阅读ES2015语法的相关文档
        // item也是FlatList中固定的参数名，请阅读FlatList的相关文档
        return (
            <View style={styles.container}>
            <Image
                source={{ uri: item.posters.thumbnail }}
                style={styles.thumbnail}
            />
            <View style={styles.rightContainer}>
                <Text style={styles.title}>{item.title}</Text>
                <Text style={styles.title}>{item.ratings.audience_score}</Text>
                <Text style={styles.year}>{item.year}</Text>
            </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF"
      },
      rightContainer: {
        flex: 1
      },
      title: {
        fontSize: 20,
        marginBottom: 8,
        textAlign: "center"
      },
      year: {
        textAlign: "center"
      },
      thumbnail: {
        width: 53,
        height: 81
      },
      list: {
        paddingTop: 20,
        backgroundColor: "#F5FCFF"
      }
})